﻿<!--@jQuery-->
<div id="chartContainer"></div>
<div class="inline" style="text-align:center">
    <div>constantLineStyle | label | position:&nbsp;</div>
    <div id="selectBoxContainer"></div>
</div>
<!--/@jQuery-->
<!--@Knockout-->
<div id="chartContainer" data-bind="dxChart: {
    dataSource: data,
    commonSeriesSettings: {
        argumentField: 'year'
    },
    series: [
        { valueField: 'europe', name: 'Europe' },
        { valueField: 'americas', name: 'Americas' },
        { valueField: 'africa', name: 'Africa' }
    ],
    animation: false,
    argumentAxis: {
        constantLines: [
            { value: 1955 },
            { value: 1992 },
            { value: 2008 }
        ]
    },
    valueAxis: {
        label: { format: 'largeNumber' },
        constantLines: [{ value: 1000000000 }]
    },
    commonAxisSettings: {
        constantLineStyle: {
            label: { position: selectBoxValue }
        }
    }
}"></div>
<div class="inline" style="text-align:center">
    <div>constantLineStyle | label | position:&nbsp;</div>
    <div id="selectBoxContainer" data-bind="dxSelectBox: {
        items: ['inside', 'outside'],
        value: selectBoxValue
    }"></div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="chartController">
    <div id="chartContainer" dx-chart="{
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        argumentAxis: {
            constantLines: [
                { value: 1955 },
                { value: 1992 },
                { value: 2008 }
            ]
        },
        valueAxis: {
            label: { format: 'largeNumber' },
            constantLines: [{ value: 1000000000 }]
        },
        commonAxisSettings: {
            constantLineStyle: {
                label: { position: 'inside' }
            }
        },
        bindingOptions: {
            'commonAxisSettings.constantLineStyle.label.position': 'selectBoxValue'
        }
    }"></div>
    <div class="inline" style="text-align:center">
        <div>constantLineStyle | label | position:&nbsp;</div>
        <div id="selectBoxContainer" ng-model="selectBoxValue" dx-select-box="{
            items: ['inside', 'outside']
        }"></div>
    </div>
</div>
<!--/@AngularJS-->